<template>
  <input :type="inptype" :placeholder="inp" v-model="inputverify" :class="verifyval == true ? '' : 'errcolor'"
    @blur="popup"
  />
</template>

<script>
    export default {
        props: ["inptype", "inp", "verify",'msg'], //接收柱间传的值 ,template调用.
        data(){
            return {
                inputverify:'',
                verifyval:true
            }
        },
        watch:{
            inputverify(){  //监听的校验函数
                //console.log(this.msg);
                const reg = this.verify
                //const reg = new RegExp(this.verify)
                if(reg.test(this.inputverify)){
                    console.log('校验成功');
                    this.verifyval = true
                }else{
                    this.verifyval = false
                    console.log(this.msg);
                }
            
                this.$emit('verifyvalue',this.inputverify)

            }

        },
        methods:{
            popup(){
                if(!this.verifyval){
                    this.$toast(this.msg)
                }
            }
        }
    };
</script>

<style lang="less" scoped>
  
    input{
      border: 0;
      width: 86%;
      border-bottom: solid 1px #1e1e1e;
      background-color: inherit;
      outline: none;
      margin-top: 32/360*100vw;
      font-size: 20/360*100vw;
    }
    .errcolor{
        border-bottom-color: red;
    }
</style>